<!-- 投诉内容 -->
<template>
	<view class="page">
		<view class=""> 您的建议是关于： </view>
		<view class="">
			<view :class="[index==i?'activ':'defaultColor']" v-for="(v,i) in list" :key="i" @click="onseleceBtn(i,v)">
				{{v}}
			</view>
		</view>
		<view class="content">
			<view>
				<textarea placeholder-style="color:#A5A5A5" placeholder="请提出您的宝贵建议" maxlength=100 v-model="content"
					class="input" />
				<view class=""> {{content.split('').length}}/100 </view>
			</view>
			<view class="" @click="handleSubmit"> 提交 </view>
		</view>
	</view>
</template>
<script>
	export default ({
		data() {
			return {
				value: '',
				list: [],
				index: 0,
				content: '', //输入的内容
			}
		},
		onShow() {},
		methods: {
			onseleceBtn(e, l) {
				this.index = e
			},
			// 提交反馈
			async handleSubmit() {
				let res = await this.$fetch(this.$api.add_complaint, {
					content: this.content,
					type: this.index,
				}, 'POST', 'JSON')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				uni.showToast({
					title: '提交成功~',
					icon: 'none'
				})
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 800)
			},
		},
		onLoad() {
			this.list = Object.values(uni.getStorageSync('opinionType'))
			this.listKeys = Object.keys(uni.getStorageSync('opinionType'))
		},
		onShareAppMessage() {
			if (uni.getStorageSync('userType') == 1) {
				return {
					title: "足不出户，免费招工",
					desc: "线上招募零工，工价透明，免费使用",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
					success: res => {}
				}
			} else {
				return {
					title: "在家找日结兼职，工种齐全",
					desc: "免费使用，提前在家找日结兼职",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
					success: res => {}
				}
			}
		},
	})
</script>
<style lang="scss" scoped>
	.page {
		height: calc(100vh);
		background: #fff;
		overflow: hidden;

		&>view:nth-child(1) {
			font-size: 40rpx;
			font-weight: bold;
			color: #262626;
			margin: 22rpx 0 0 28rpx;
		}

		&>view:nth-child(2) {
			margin: 42rpx 28rpx 0;
			display: grid;
			grid-template-columns: repeat(4, 144rpx);
			grid-template-rows: repeat(1, 80rpx);
			justify-content: space-between;
			align-items: center;
			text-align: center;

			&>view {
				background: #F1F1F5;
				border-radius: 12rpx;
				width: 144rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #262626;
			}

			.defaultColor {
				background: #F1F1F5;
				border-radius: 12rpx;
			}

			.activ {
				background: #FCC928;
				box-shadow: 0rpx 4rpx 12rpx 2rpx rgba(252, 201, 40, 0.4);
				border-radius: 12rpx;
			}
		}
	}

	.content {
		width: 100vw;
		background: #fff;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		&>view:first-child {
			width: 694rpx;
			height: 464rpx;
			background: #F1F1F5 !important;
			border-radius: 12rpx;
			opacity: 1;
			border: 2rpx solid #C2C2C2;
			margin: 40rpx auto;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.input {
				width: 634rpx;
				height: 326rpx;
				margin: 30rpx;
			}

			&>view {
				display: flex;
				justify-content: flex-end;
				margin-right: 22rpx;
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #A5A5A5;
			}
		}

		&>view:nth-child(2) {
			margin-left: 28rpx;
			margin-bottom: 30rpx;
			overflow: hidden;

			&>view:first-child {
				font-size: 32rpx;
				font-weight: bold;
				color: #1A1A1A;

				&>text {
					font-size: 28rpx;
					font-weight: 400;
					color: #1A1A1A;
				}
			}
		}

		&>view:last-child {
			width: 694rpx;
			height: 88rpx;
			background: #FCC928;
			box-shadow: 2rpx 12rpx 24rpx 2rpx rgba(252, 201, 40, 0.4);
			border-radius: 12rpx;
			opacity: 1;
			display: flex;
			font-weight: bold;
			justify-content: center;
			align-items: center;
			margin-left: 28rpx;
			position: fixed;
			bottom: 88rpx;
			left: 0;
		}
	}
</style>